<template>
	<view class="fullContent">
		<view class="businessCardWrap">
			<view class="qrcodeWrap bgw">
				<view class="avatar"></view>
				<view class="name">汪存洲</view>
				<view class="jobInfo">
					<view>肿瘤科</view>
					<view class="shu"></view>
					<view>高级副主任</view>
					<view class="shu"></view>
					<view>仁泰门诊</view>
				</view>
				<view class="qrcode">
					<img :src="qrcodeImg" mode=""></img>
				</view>
				<view class="tips">关注医师，可随时在微信与医师沟通，复诊、随访、续药。</view>
			</view>
			<view class="extension">
				<view class="extensionItem">
					<img src="../../static/bg/savaImg.png" mode=""></img>
					保存到相册
				</view>
				<view class="extensionItem">
					<img src="../../static/bg/wechat.png" mode=""></img>
					发送到微信
				</view>
				<view class="extensionItem">
					<img src="../../static/bg/pyq.png" mode=""></img>
					分享至朋友圈
				</view>
			</view>
		</view>
		<canvas id="qrcode" class="hide" canvas-id="qrcode" style="width: 354px;height: 354px;" />
	</view>
</template>

<script>
	import uQRCode from '@/components/uqrcode/common/uqrcode.js'
	export default {

		data() {
			return {
				qrcodeImg: '',
				hasQrcode: false
			}
		},
		onLoad() {
			this.initQrcode()
		},
		methods: {
			initQrcode() {
				uni.showLoading({
					title: '请稍等...'
				});
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					size: 354,
					margin: 10,
					text: 'uQRCode',
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'png',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H
				})
				.then(res => {
					if(res.errMsg === 'canvasToTempFilePath:ok') {
						this.qrcodeImg = res.tempFilePath
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.businessCardWrap {
		height: 1282upx;
		background: url(../../static/bg/businesscard.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.qrcodeWrap {
			width: 640upx;
			height: 900upx;
			border-radius: 34upx;
			margin-top: 120upx;
			position: relative;
			margin-bottom: 80upx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar {
				position: absolute;
				width: 192upx;
				height: 192upx;
				background: #CCCCCC;
				border: 6upx solid #FFFFFF;
				border-radius: 50%;
				left: 224upx;
				top: -79upx;
			}

			.name {
				font-size: 48upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 70upx;
				margin-top: 150upx;
				margin-bottom: 8upx;
			}

			.jobInfo {
				display: flex;
				align-items: center;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 40upx;
				color: #414141;
				margin-bottom: 64upx;

				.shu {
					height: 20upx;
					border: 2upx solid #707070;
					margin: 0 20upx;
				}
			}

			.qrcode {
				width: 360upx;
				height: 360upx;
				margin-bottom: 64upx;
				img{
					width: 100%;
					height: 100%;
				}
			}

			.tips {
				width: 70%;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 40upx;
				color: #7B7B7B;
				text-align: center;
			}
		}

		.extension {
			display: flex;
			width: 70%;
			justify-content: space-between;

			.extensionItem {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 34upx;
				color: #9F9F9F;

				img {
					width: 90upx;
					height: 90upx;
					margin-bottom: 14upx;
				}

			}
		}
	}
	.hide{
		position:fixed;
		left:100%;
	}
</style>
